<template>
  <el-container>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        :params="params"
        row-key="id"
        stripe
      >
        <el-table-column
          label="产品名称"
          prop="name"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="规格型号"
          prop="specification"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="材质"
          prop="vproductMaterial"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="备注"
          prop="vproductRemark"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="合同数量"
          prop="num"
          width="100"
          v-if="source == 0"
        ></el-table-column>
        <el-table-column
          label="退货重做数量"
          prop="num"
          width="100"
          v-if="source == 1"
        ></el-table-column>
        <el-table-column
          label="已生产数量"
          prop="produceNum"
          width="100"
        ></el-table-column>
        <el-table-column
          label="发货数量"
          prop="deliverNum"
          width="100"
          v-if="source == 1"
        ></el-table-column>
        <el-table-column label="产品状态" prop="status" width="100">
          <template #default="scope">
            <p v-if="scope.row.produceStatus == 0">未生产</p>
            <p v-if="scope.row.produceStatus == 1" style="color: green">
              生产中
            </p>
            <p v-if="scope.row.produceStatus == 2" style="color: #2bd814">
              已完成
            </p>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="生产设备"
          prop="equipmentCode"
          width="250"
        ></el-table-column> -->
        <el-table-column label="是否有外发" prop="isOut" width="100">
          <template #default="scope">
            <p>{{ scope.row.isOut == 0 ? "否" : "是" }}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="排产状态" prop="schedulingStatus" width="200">
          <template #default="scope">
            <p v-if="scope.row.schedulingStatus == 0">未排产</p>
            <p v-if="scope.row.schedulingStatus == 1" style="color: green">
              部分排产
            </p>
            <p v-if="scope.row.schedulingStatus == 2" style="color: #2bd814">
              已完成
            </p>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template #default="scope">
            <el-button-group>
              <el-button
                v-if="scope.row.produceStatus != 0"
                text
                type="primary"
                size="small"
                @click="getProductionList(scope.row)"
                >排产信息</el-button
              >
              <!-- <el-button
                v-if="scope.row.produceStatus === 0"
                text
                type="primary"
                size="small"
                @click="start(scope.row)"
                v-auth-button="['start/produceOrderManagement']"
                >开始生产</el-button
              > 
             <el-button
                text
                type="primary"
                size="small"
                @click="compelet(scope.row, scope.$index)"
                v-if="scope.row.produceStatus != 2"
                v-auth-button="['compelet/produceOrderManagement']"
                >录入数据</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="compelet(scope.row, scope.$index)"
                v-if="scope.row.produceStatus > 0"
                v-auth-button="['send/produceOrderManagement']"
                >发货</el-button
              >  -->
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <!--排产信息列表-->
  <sc-dialog v-model="visible" title="排产信息" destroy-on-close>
    <scTable
      ref="table"
      :data="productionList"
      row-key="id"
      stripe
      hideSetting
      hideRefresh
    >
      <el-table-column
        label="名称"
        prop="productsName"
        width="200"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <!-- <el-table-column
        label="拆解件"
        prop="name"
        width="200"
        :show-overflow-tooltip="true"
      ></el-table-column> -->
      <el-table-column
        label="排产数量"
        prop="schedulingNum"
        width="100"
      ></el-table-column>
      <el-table-column
        label="生产设备"
        prop="equipmentCode"
        width="100"
      ></el-table-column>
      <el-table-column label="生产状态" prop="type" width="100">
        <template #default="scope">
          <p v-if="scope.row.type == 1" style="color: green">生产中</p>
          <p v-if="scope.row.type == 2" style="color: #2bd814">已完成</p>
        </template>
      </el-table-column>
      <el-table-column label="是否拆解" width="100">
        <template #default="scope">
          <p>{{ scope.row.isDismantle == 0 ? "否" : "是" }}</p>
        </template>
      </el-table-column>
      <el-table-column label="图片" prop="vproductRemark" min-width="100">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.images[0]"
            :preview-src-list="scope.row.images"
            preview-teleported
            :z-index="9999"
            v-if="scope.row.images[0]"
          />
        </template>
      </el-table-column>
    </scTable>
  </sc-dialog>
</template>

<script>

export default {
  props: {
    id: {
      type: String
    },
    source: {
      type: Number
    }
  },

  data () {
    return {
      params: {
        produceId: this.id,
      },
      apiObj: this.$API.produce.produceProducts.selectProductsByProduceId,
      production: {
        apiObj: this.$API.produce.produceProducts.getProductionList,
        params: {}
      },

      visible: false,
      productionList: []//生产单排产信息列表
    }
  },
  mounted () {
    // this.getProductionList() 
  },
  methods: {
    // 获取生产单排产信息列表
    async getProductionList (row) {
      console.log(row)
      let param = {
        produceId: this.$route.query.id,//生产单id
        productId: row.quotesProductId//生产产品id

      }
      let { data } = await this.$API.produce.products.getProductionList.get(param)
      if (data.length != 0) {
        this.visible = true
        let list = data
        let arr = []
        let images = []

        list.forEach(item => {
          images = item.vendorUrlList.map(i_item => i_item.url)
          item.images = images
        })

        this.productionList = list
        console.log(this.productionList)
      } else {
        this.$message.waring(`该产品没有排产信息`)
      }

    },




  }
};
</script>
<style></style>
